@charset "utf-8";
@import 'reset';

// @function px2Vw($px, $baseRatio: 3.75px) {
//     @return ($px/$baseRatio) * 1vw;
// }

// .wrap {
//     width: px2Vw(375px);
// }

.wrap {
    // width: 100vw;
    display: flex;
    flex-direction: column;

    // background-color: red;
    header {
        // width: 100vw;

        display: flex;
        flex-direction: column;
        background-color: #EAECED;
        // margin-bottom: 2.1333vw;

        .header-title {
            // width: 100vw;
            height: 13.8667vw;
            margin-bottom: .5333vw;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;

            // position: fixed;



            .header-titler {
                width: 23.3333vw;
                height: 5.8667vw;

                &::before {
                    content: '';
                    display: inline-block;
                    width: 2.6667vw;
                    height: 2.6667vw;
                    border-left: .2667vw solid #555;
                    border-bottom: .2667vw solid #555;
                    transform: rotate(45deg);
                    position: relative;
                    left: -38vw;
                }

                span {
                    font-size: 4.2667vw;
                    color: #555;
                }
            }
        }

        .header-content {
            background-color: #fff;

            // width: 100vw;
            height: 45.3333vw;
            margin-bottom: .2667vw;
            display: flex;

            .header-button {
                width: 8.8vw;
                height: 45.3333vw;
                display: flex;
                justify-content: center;
                align-items: center;

                .header-buttoner {
                    width: 3.4667vw;
                    // height: 2.6667vw;
                }
            }

            .hearder-photo {
                margin-top: 4vw;
                width: 35.4667vw;
                height: 35.4667vw;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .header-text {
                width: 40vw;
                height: 33.3333vw;
                margin-top: 10.6667vw;
                margin-left: 2.6667vw;
                // background-color: #fff;

                display: flex;
                flex-direction: column;

                .header-flower {
                    span {
                        color: #333333;
                        font-size: 4.2667vw;
                    }
                }

                .header-quantity {
                    width: 40vw;
                    display: flex;
                    margin-top: 3.4667vw;

                    .quantity-text {
                        width: 13.3333vw;

                        span {
                            color: #555555;
                            font-size: 3.7333vw;
                        }

                    }

                    .quantity-numble {
                        span {
                            color: #555555;
                            font-size: 3.7333vw;
                        }

                    }

                }

                .header-price {
                    width: 40vw;
                    display: flex;
                    margin-top: 3.4667vw;

                    .price-text {
                        span {
                            color: #555555;
                            font-size: 3.7333vw;
                        }
                    }

                    .price-numble-old {
                        span {
                            color: #999999;
                            font-size: 3.7333vw;
                            text-decoration: line-through;
                            // &::after{
                            //     display: inline-block;
                            //     content: '';
                            //     width: 11.1333vw;
                            //     height: 5.3333vw;
                            //     border-bottom: .2667vw solid #999999;
                            //     position: relative;
                            //     top: -0.3667vw;
                            //     left: -9.8667vw;
                            // }
                        }
                    }

                    .price-numble-new {
                        span {
                            color: red;
                            font-size: 3.7333vw;
                        }
                    }
                }
            }


        }

        .header-footer {
            // width: 100vw;
            height: 2.6667vw;
            background-color: #EAECED;

        }
    }

    main {
        // width: 100vw;
        display: flex;
        flex-direction: column;
        background-color: #F8F8F8;

        .main-title {
            width: 26.6667vw;
            height: 6.6667vw;
            margin-top: 4vw;
            margin-left: 4vw;
            margin-bottom: 2.6667vw;

            span {
                color: #555555;
                font-size: 4.6667vw;
            }
        }

        .main-content-row {
            // width: 100vw;
            margin-bottom: 2.6667vw;
            display: flex;
            justify-content: space-around;

            .main-content {
                width: 44vw;
                height: 62.6667vw;
                background-color: #FFFFFF;
                display: flex;
                flex-direction: column;
                box-shadow:
                    2.8px 2.8px 2.2px rgba(0, 0, 0, 0.003),
                    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.009),
                    12.5px 12.5px 10px rgba(0, 0, 0, 0.018),
                    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.03),
                    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.046),
                    100px 100px 80px rgba(0, 0, 0, 0.07);

                .main-photo {
                    width: 44vw;
                    height: 44vw;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .main-flower {
                    margin-top: 5.0667vw;
                    margin-left: 2.6667vw;

                    span {
                        font-size: 3.7333vw;
                        color: #333;
                    }
                }

                .main-footer {
                    // width: 100vw;
                    margin-top: 1.3333vw;
                    margin-left: 2.6667vw;
                    background-color: white;
                    display: flex;

                    .main-price {
                        width: 20vw;

                        span {
                            color: #FF734C;
                            font-size: 3.7333vw;
                        }
                    }

                }

                .main-sales {
                    span {
                        color: #999999;
                        font-size: 3.2vw;
                    }
                }
            }
        }

        .main-footer {
            height: 16vw;
            background-color: #F8F8F8;
        }
    }

    footer {
        display: flex;
        height: 13.3333vw;
        position: fixed;
        bottom: 0;

        .come {
            width: 70vw;
            // margin-left: 4vw;
            display: flex;
            align-items: center;
            background-color: white;

            span {
                margin-left: 4vw;

                font-size: 3.7333vw;
                color: #884E22;
            }
        }

        .settle {
            width: 30vw;
            // margin-left: 4vw;

            display: flex;
            align-items: center;
            background-color: #884E22;
            // text-align: center;

            span {
                margin-left: 4vw;

                font-size: 3.7333vw;
                color: white;

            }
        }
    }
}